import {
  defineComponent,
  //  h,
  ref,
} from "vue";

const B = (_, { slots }) => {
  console.log("slots", slots);

  return (
    <div>
      <div>{slots.default && slots.default()}</div>
      <div>{slots.xw && slots.xw()}</div>
      <div>{slots.paramSlot && slots.paramSlot({ name: "xwzs", age: 18 })}</div>
    </div>
  );
};
// @ts-ignore
const jsxCom = (props, ctx) => {
  console.log("props", props);
  console.log("ctx", ctx);
  const { count } = props;
  return (
    <div style={{ backgroundColor: "pink" }}>
      <h3>我是jsxCom组件: </h3>
      {ctx.slots.default ? ctx.slots.default() : "暂无default slot"}
      <h3>count: {count.value}，我来子组件</h3>
      <button class="xw-btn" onClick={() => ctx.emit("add")} style="border: 1px solid #ddd;">
        点击+1
      </button>
      <h4>具名slot</h4>
      {ctx.slots.xw ? ctx.slots.xw({ name: "xw", age: 18 }) : "暂无具名xw slot"}
    </div>
  );
};
export default defineComponent({
  props: {
    xw: String,
  },
  setup(props, ctx) {
    console.log("props", props);
    console.log("ctx", ctx);
    const count = ref(0);
    const addFun = () => {
      count.value = count.value + 1;
    };
    return () => (
      <div>
        <B>我是B组件default slot</B>
        <div>count:{count.value}, 我来自父组件</div>
        <jsxCom count={count} onAdd={addFun}>
          {/* 传递slots */}
          {{
            default: () => <h5>I AM SLOT DEFAULT</h5>,
            xw: (props) => (
              <div>
                <h5>
                  传递参数：
                  {props.name}
                  {props.age}
                </h5>

                <h5>XW SLOT one</h5>
                <h5>XW SLOT two</h5>
              </div>
            ),
          }}
        </jsxCom>
      </div>
    );
  },
  emits: ["sayHello"],
  // render(props, ctx) {
  //   console.log("render props", props);
  //   console.log("render ctx", ctx);
  //   const { emit } = props;
  //   const slots = {
  //     default: () => <div>默认插槽</div>,
  //     xw: () => <div>具名插槽xw</div>,
  //     paramSlot: (props: Record<"name" | "age", string | number>) => (
  //       <div>
  //         作用域插槽paramSlot:{props.name}:{props.age}
  //       </div>
  //     ),
  //   };
  //   const clickFun = (name) => {
  //     console.log("click B");
  //     console.log("emits", emit);

  //     emit("sayHello", name);
  //   };
  //   return (
  //     <div>
  //       <h2>jsx</h2>
  //       <div>{props.xw}</div>
  //       <B
  //         v-slots={slots}
  //         onClick={() => clickFun("xw")}
  //         style={{ background: "skyblue" }}
  //       ></B>
  //       <B
  //         v-slots={{
  //           default: () => <div>默认插槽</div>,
  //           xw: () => <div>具名插槽xw</div>,
  //           paramSlot: (props: Record<"name" | "age", string | number>) => (
  //             <div>
  //               作用域插槽paramSlot:
  //               <br />
  //               {props.name}:
  //               <br />
  //               {props.age}
  //             </div>
  //           ),
  //         }}
  //       ></B>
  //     </div>
  //   );
  // },
});

// export default function A() {
//   return (
//     <div>
//       <h2>tsx组件</h2>
//       <div>内容</div>
//     </div>
//   );
// }
